<template>
  <div class="teaching">
    <!-- 教学资料 -->
    <div class="title">
      <div class="des">
        <img :src="logo" alt="" />
        <div class="text">
          <p>{{ name }}</p>
          <span v-if="type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div class="level">lv{{ level }}</div>
      </div>
    </div>
    <div class="cont">
      <!-- 教务资料 -->
      <div class="teachingdata">
        <span>教务资料</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="添加父项"
          placement="top"
          ><button class="addfunc" @click="pushTeachingData()"></button>
        </el-tooltip>

        <!-- <table cellpadding="0" cellspacing="0" style="width: 100%">
          <tr height="62" style="text-align: center">
            <td>序号</td>
            <td>课件/视频名称</td>
            <td>扩展类型</td>
            <td>课件/视频地址</td>
            <td>操作</td>
          </tr>
        </table> -->
        <el-table
          :data="projectmaterialFileVoList"
          style="width: 100%"
          border
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
          :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        >
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column label="课件/视频名称" width="500">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
              <input
                type="text"
                v-model="scope.row.name"
                v-show="scope.row.isEdit"
              />
              <el-tooltip
                class="item"
                effect="dark"
                content="添加子项"
                placement="top"
              >
                <button
                  class="addNew"
                  @click="pushTeachingChildrenData(scope.row)"
                ></button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="扩展类型" prop="fileType" width="200">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit" v-if="scope.row.fileType === 1"
                >图片</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 2"
                >文档</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 3"
                >视频</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 4"
                >其他</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 0"
                >无附件</span
              >
              <el-select
                v-model="scope.row.fileType"
                placeholder="请选择文件类型"
                v-show="scope.row.isEdit"
              >
                <el-option
                  v-for="item in optionSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </template
          ></el-table-column>
          <el-table-column label="课件/视频地址">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit">{{ scope.row.url }}</span>
              <input
                type="text"
                v-model="scope.row.url"
                v-show="scope.row.isEdit"
              /> </template
          ></el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit === false">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="上移"
                  placement="top"
                >
                  <button
                    class="btn1"
                    @click="handleOrder(scope.row, 1)"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="下移"
                  placement="top"
                >
                  <button
                    class="btn2"
                    @click="handleOrder(scope.row, 2)"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <button
                    class="btn3"
                    @click="handleModify(scope.$index, scope.row)"
                    v-show="!scope.row.isEdit"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <button
                    class="btn4"
                    @click="deleterow1(scope.row.id)"
                  ></button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="上传文件"
                  placement="top"
                >
                  <el-upload
                    style="display: inline-block"
                    :headers="{ token: token }"
                    action="http://test.zhihanyixing.com:8084/file/upload"
                    :on-success="handleSuccess"
                    :data="{
                      businessId: scope.row.id,
                      type: 5,
                      userId: userId,
                    }"
                  >
                    <button class="btn6" slot="trigger"></button>
                  </el-upload>
                </el-tooltip>
              </div>
              <div v-else>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="完成修改"
                  placement="top"
                >
                  <button
                    class="btn5"
                    @click="finishEdit(scope.$index, scope.row)"
                    v-show="scope.row.isEdit"
                  ></button>
                </el-tooltip>
              </div>

              <!-- <input
                class="btn6"
                type="file"
                accept="image/png,image/gif,image/jpeg"
                @change="upFile(scope.row.id)"
              /> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 教师课件/视频 -->
      <div class="video">
        <span>教师课件/视频</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="添加父项"
          placement="top"
        >
          <button class="addfunc" @click="pushVideoData()"></button>
        </el-tooltip>

        <!-- <table cellpadding="0" cellspacing="0">
          <tr height="120">
            <td>序号</td>
            <td>课件/视频名称</td>
            <td>扩展类型</td>
            <td>课件/视频地址</td>
            <td>操作</td>
          </tr>
        </table> -->
        <el-table
          :data="projectmaterialFileVoTypeList"
          style="width: 100%"
          border
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :header-cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
          :cell-style="{ textAlign: 'center', borderColor: '#DAE1FD' }"
        >
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column label="课件/视频名称" width="500">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit">{{ scope.row.name }}</span>
              <input
                type="text"
                v-model="scope.row.name"
                v-show="scope.row.isEdit"
              />
              <el-tooltip
                class="item"
                effect="dark"
                content="添加子项"
                placement="top"
              >
                <button
                  class="addNew"
                  @click="pushVideoChildrenData(scope.row)"
                ></button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="扩展类型" prop="fileType" width="200">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit" v-if="scope.row.fileType === 1"
                >图片</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 2"
                >文档</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 3"
                >视频</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 4"
                >其他</span
              >
              <span
                v-show="!scope.row.isEdit"
                v-else-if="scope.row.fileType === 0"
              ></span>
              <el-select
                v-model="scope.row.fileType"
                placeholder="请选择扩展类型"
                v-show="scope.row.isEdit"
              >
                <el-option
                  v-for="item in optionSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
            ></template>
          </el-table-column>
          <el-table-column label="课件/视频地址">
            <template slot-scope="scope">
              <span v-show="!scope.row.isEdit">{{ scope.row.url }}</span>
              <input
                type="text"
                v-model="scope.row.url"
                v-show="scope.row.isEdit" /></template
          ></el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <div v-if="scope.row.isEdit === false">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="上移"
                  placement="top"
                >
                  <button
                    class="btn1"
                    @click="handleOrder(scope.row, 1)"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="下移"
                  placement="top"
                >
                  <button
                    class="btn2"
                    @click="handleOrder(scope.row, 2)"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <button
                    class="btn3"
                    @click="handleModify(scope.$index, scope.row)"
                    v-show="!scope.row.isEdit"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <button
                    class="btn4"
                    @click="deleterow1(scope.row.id)"
                  ></button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="上传文件"
                  placement="top"
                >
                  <el-upload
                    style="display: inline-block"
                    :headers="{ token: token }"
                    action="http://test.zhihanyixing.com:8084/file/upload"
                    :on-success="handleSuccess"
                    :data="{
                      businessId: scope.row.id,
                      type: 5,
                      userId: userId,
                    }"
                  >
                    <button class="btn6" slot="trigger"></button>
                  </el-upload>
                </el-tooltip>
              </div>
              <div v-else>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="完成修改"
                  placement="top"
                >
                  <button
                    class="btn5"
                    @click="finishEdit(scope.$index, scope.row)"
                    v-show="scope.row.isEdit"
                  ></button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getteaching, delteaching, material, modifyOrder, editData } from '@/api/project/teaching';
export default {
  name: 'teaching',
  data() {
    return {
      token: sessionStorage.getItem('usertoken'),
      userId: Number(sessionStorage.getItem('userid')),
      fileList: [],
      edit: false,
      name: '',
      type: 0,
      level: 0,
      logo: '',
      projectmaterialFileVoList: [

      ],
      projectmaterialFileVoTypeList: [],
      optionSelect: [{
        value: 1,
        label: '图片'
      }, {
        value: 2,
        label: '文档'
      }, {
        value: 3,
        label: '视频'
      }, {
        value: 4,
        label: '其他'
      }],
      value: '',
      fileType: 0,
      updateItem: {
        filetype: 3,
        id: 0,
        name: '4第二小节',
        ordernum: 0,
        parentid: 0,
        projectid: 5,
        type: 1
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 文件上传成功回调
    handleSuccess(index, value) {
      // console.log('12312313', index, value);
      this.$message({
        showClose: true,
        type: 'success',
        message: '上传成功'
      });
      // 重新加载数据
      this.init();
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePreview(file) {
    //   console.log(file);
    // },
    // handleExceed(files, fileList) {
    //   this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    // },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // },
    // 初始化
    init() {
      // 获取项目教学资料
      // console.log('12');

      getteaching(Number(localStorage.getItem('projectId'))).then(res => {
        // console.log(res, '122');

        this.projectmaterialFileVoList = res.data.projectmaterialFileVoList;
        this.projectmaterialFileVoTypeList = res.data.projectmaterialFileVoTypeList;
        this.name = res.data.name;
        this.type = res.data.type;
        this.level = res.data.level;
        this.logo = res.data.logo;
        // tianjia zhuangtai
        this.addStatus(this.projectmaterialFileVoList);
        this.addStatus(this.projectmaterialFileVoTypeList);
        this.$forceUpdate();
      });
    },
    // 递归添加状态的属性
    addStatus(list) {
      // console.log('添加状态', list);
      // console.log(this.list);
      list.map(item => {
        item.isEdit = false;
        // item = {...item, isEdit: false};
        this.addStatus(item.children);
      });
      // console.log('添加状态', list);
      // console.log(list);
    },
    // 添加父项1
    async pushTeachingData() {
      let obj = {
        // isEdit: true,
        filetype: 1,
        name: '',
        ordernum: this.projectmaterialFileVoList.length + 1,
        parentid: 0,
        projectid: Number(localStorage.getItem('projectId')),
        type: 1,
        url: null
      };
      const res = await material(obj);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '添加父项成功'
        });
        this.init();
        this.$forceUpdate();
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: '添加父项失败'
        });
      }
      // this.projectmaterialFileVoList.push(obj);

      // console.log(this.projectmaterialFileVoList, 'list');
    },
    // 添加子项1
    pushTeachingChildrenData(val) {
      // console.log('dianjile', val);
      let objChildren = {
        filetype: 1,
        name: '',
        ordernum: val.children.length + 1,
        parentid: val.id,
        projectid: Number(localStorage.getItem('projectId')),
        type: 1,
        url: null
      };
      material(objChildren).then(res => {
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '添加子项成功'
          });
          this.init();
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '添加子项失败'
          });

          // console.log(res);
        }
      });
    },

    // 添加父项2
    async pushVideoData() {
      let obj = {
        isEdit: true,
        filetype: 0,
        name: '',
        ordernum: this.projectmaterialFileVoTypeList.length + 1,
        parentid: 0,
        projectid: Number(localStorage.getItem('projectId')),
        type: 2,
        url: null
      };
      // this.projectmaterialFileVoTypeList.push(obj);
      const res = await material(obj);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '添加父项成功'
        });
        this.init();
        this.$forceUpdate();
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: '添加父项失败'
        });
      }
    },
    // 添加子项2
    pushVideoChildrenData(val) {
      let objChildren = {
        filetype: 1,
        name: '',
        ordernum: val.children.length + 1,
        parentid: val.id,
        projectid: Number(localStorage.getItem('projectId')),
        type: 2,
        url: null
      };
      material(objChildren).then(res => {
        // console.log(res);
        this.init();
      });
    },
    // 删除教务资料
    deleterow1(id) {
      this.$confirm('是否删除该行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(id);
        // _this.projectmaterialFileVoList.splice(index, 1);
        delteaching(id).then(res => {
          // console.log(res);
          this.init();
        });
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除教师课件视频
    deleterow2(id) {
      this.$confirm('是否删除该行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delteaching(id).then(res => {
          // console.log(res);
          getteaching(Number(localStorage.getItem('projectId'))).then(res => {
            // console.log(res);
            this.projectmaterialFileVoTypeList = res.data.projectmaterialFileVoTypeList;
          });
        });
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 修改当前项顺序
    async handleOrder(val, val2) {
      // console.log('上移', val2);
      const res = await modifyOrder(val.id, val2);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '移动成功'
        });
        this.init();
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: res.msg
        });
      }
    },
    // 处理修改教务资料的编辑状态
    handleModify(index, row) {
      this.$set(row, 'isEdit', true);
      this.$forceUpdate();
      if (row.fileType === 0) {
        row.fileType = null;
      }
      // console.log(index, row);
    },
    // 修改内容
    handleEdit() {

    },
    // 完成编辑
    finishEdit(index, row) {
      this.$set(row, 'isEdit', false);
      this.$forceUpdate();
      // console.log('row', row);
      this.updateItem.id = row.id;
      this.updateItem.type = row.type;
      this.updateItem.parentid = row.parentId;
      this.updateItem.name = row.name;
      this.updateItem.url = row.url;
      this.updateItem.ordernum = row.ordernum;
      this.updateItem.filetype = row.fileType;
      this.updateItem.projectid = Number(localStorage.getItem('projectId'));
      // console.log(this.updateItem);
      let data = JSON.stringify(this.updateItem);
      editData(data).then(res => {
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '修改成功'
          });
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '修改失败'
          });
        }
        // console.log(res, 'res');
      });
    }
  }
};
</script>

<style lang="less" scoped>
.teaching {
  width: 100%;
  min-height: 700px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;

  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;
    position: relative;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 22px;
        width: 59px;
        height: 22px;
        background: #e8f8ec;
        border-radius: 9px;
        margin-top: 5px;
        margin-left: 20px;
      }
    }
  }
  .cont {
    width: 98%;
    margin: 0 auto;
    span {
      display: inline-block;
      margin-bottom: 8px;
      font-size: 16px;
      color: #222222;
      line-height: 25px;
    }
    .addNew {
      position: absolute;
      left: -40px;
      top: 5%;
      background: url("~@/assets/mbtnw.png") no-repeat center center;
      background-size: 21px 21px;
    }
    .teachingdata {
      margin-bottom: 45px;
      button {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        padding: 0;
        margin: 0px 5px;
        margin-top: 5px;
        cursor: pointer;
      }
      .btn1 {
        background: url("~@/assets/up.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn2 {
        background: url("~@/assets/down.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn3 {
        background: url("~@/assets/tabBtn3.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn4 {
        background: url("~@/assets/delete.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn5 {
        background: url("~@/assets/tabBtn3.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .btn6 {
        background: url("~@/assets/uploadteaching.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .video {
      margin-bottom: 20px;
      button {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        padding: 0;
        margin: 0px 5px;
        margin-top: 5px;
        cursor: pointer;
      }
      .btn1 {
        background: url("~@/assets/up.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn2 {
        background: url("~@/assets/down.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn3 {
        background: url("~@/assets/tabBtn3.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn4 {
        background: url("~@/assets/delete.png") no-repeat center center;

        background-size: 100% 100%;
      }
      .btn5 {
        background: url("~@/assets/tabBtn3.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .btn6 {
        background: url("~@/assets/uploadteaching.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
    /deep/ .el-table {
      border-radius: 8px 8px 0 0;
      border-left: 1px solid #f1f4ff;
      border-top: 1px solid #f1f4ff;
      td:focus-within {
        box-shadow: inset 0px 1px 4px 0px #2fc0e0,
          inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
          inset -1px 0px 4px 0px #2fc0e0;
      }
    }
    /deep/ .el-table th {
      height: 42px;
      font-size: 16px;
      font-weight: 400;
      color: #222222;
      line-height: 14px;
      background: #f1f5ff;
    }
  }
  .addfunc {
    width: 21px !important;
    height: 21px !important;
    background: url("~@/assets/mbtn.png") no-repeat center center;
    background-size: 100% 100%;
    vertical-align: text-bottom;
    margin-left: 3px;
  }
}
// input框样式
input {
  outline: none;
  border: none;
  width: 90%;
}
/deep/ .el-input__inner {
  border: none;
}
// 隐藏上传文件列表
/deep/.el-upload-list {
  display: none;
}
// 修改列表行高
/deep/.el-table tr td {
  padding: 0;
  span {
    margin: 0 !important;
  }
}
</style>
